/**
 * Copyright (c) 2018-present, Chen Guodong
 * All rights reserved.
 *
 * @flow
 */


<template>
  <div class="content">
    <div class="header">
      <NavBar title="消息列表">
        <router-link slot="left" to="/home" style="width: 100%;text-align: center;">
          <i class="iconfont icon-arrow-left" style="font-size: 20px;"></i>
        </router-link>
      </NavBar>
    </div>
    <div class="main">
      <mescroll-vue ref="mescroll" :down="mescrollDown" @init="mescrollInit">
        <ul class="message-box">
          <router-link
            :to="{path: '/messageDetail', query: item}"
            v-for="(item,index) in messageData"
            :key="index"
          >
            <li>
              <div class="left">
                <img
                  class="blue"
                  src="http://192.168.1.216:8087/WujiaOa/public/imgs/icon-todo.png"
                  alt
                >
              </div>
              <div class="right">
                <p class="title">
                  <b class="text">{{item.text}}</b>
                  <b class="time">{{getTime(Date.parse(item.time)/1000)}}</b>
                </p>
                <p class="info">{{item.info}}</p>
                <span class="badge-box" v-if="item.badge">
                  <Badge>{{item.badge}}</Badge>
                </span>
              </div>
            </li>
          </router-link>
        </ul>
      </mescroll-vue>
    </div>
  </div>
</template>

<script>
import moment from "moment";
import NavBar from "../../components/NavBar/NavBar";
import Badge from "../../components/Badge/Badge";
import MescrollVue from "mescroll.js/mescroll.vue";
import messageData from "../../mock/message.js";
import { timestampFormat } from "../../util/util.js";

export default {
  data() {
    return {
      messageData: [],
      mescrollDown: {
        callback: this.downCallback,
        auto: true,
        isBoth: false
      }
    };
  },
  methods: {
    getTime: timestampFormat,
    loadTop() {
      setTimeout(() => {
        this.$refs.loadmore.onTopLoaded();
      }, 1000);
    },
    handlerItem(data) {
      this.$router.push({
        path: "/messageDetail",
        query: { data: data }
      });
    },
    // mescroll组件初始化的回调,可获取到mescroll对象
    mescrollInit(mescroll) {
      this.mescroll = mescroll;
    },
    downCallback(mescroll) {
      setTimeout(() => {
        mescroll.endSuccess();
      }, 1000);
    }
  },
  components: {
    NavBar,
    Badge,
    MescrollVue
  },
  mounted() {
    this.messageData = messageData.data;
  }
};
</script>

<style lang='less' scoped>
@import "../../util/themt.less";
@leftWidth: 50px;

.content {
  width: 100%;
  height: 100%;
  position: relative;
  overflow: hidden;
  .header {
    height: 46px;
    width: 100%;
    overflow: hidden;
    position: relative;
  }
  .main {
    height: calc(~"100% - 46px");
    width: 100%;
    position: relative;
    overflow: auto;
  }
}

.message-box {
  li {
    display: flex;
    margin: 10px 10px 0 10px;
    cursor: pointer;
    .left {
      display: inline-block;
      width: @leftWidth;
      height: 100%;
      overflow: hidden;
      padding: 0 2px 6px;
      box-sizing: content-box;
      img {
        width: 100%;
        height: 100%;
        display: block;
        .typeImgBg();
        border-radius: @leftWidth;
      }
    }
    .right {
      flex: 1;
      font-size: 14px;
      padding: 0 6px 6px;
      // box-sizing: content-box;
      overflow: hidden;
      .bottom-border-1px(@border-base);
      .title {
        display: flex;
        align-items: center;
        padding: 6px 0 10px;
        font-size: 15px;
        color: @font-regular;
        overflow: hidden;
        width: 100%;
        b {
          flex: auto;
          text-align: left;
        }
        .text {
          white-space: nowrap;
          text-overflow: ellipsis;
          overflow: hidden;
        }
        .time {
          color: @font-secondary;
          font-size: 10px;
          text-align: right;
          flex: auto;
          white-space: nowrap;
        }
      }
      .info {
        display: flex;
        align-items: center;
        color: @font-secondary;
        display: block;
        position: relative;
        padding-right: 30px;
        white-space: nowrap;
        text-overflow: ellipsis;
        width: 100%;
        overflow: hidden;
      }
      .badge-box {
        position: absolute;
        right: 10px;
        top: 30px;
      }
    }
  }
}
</style>
